
<template>
  <div id="app" @click="foo($event)">
    <nav>
      <span class="shousuo" :style="[{width:isshoushuo?'71.4vw':' 13.3333vw'}]"><i class="bi bi-search"
          @click="shousuo"></i>
        <input ref="ipt" placeholder="请搜索"
          :style="[{width:isshoushuo?'51.5333vw':'0',padding:isshoushuo?'1.3333vw 2.6667vw 1.3333vw 5.3333vw':'0'}]"
          type="text" v-model="str">
      </span>
      <div class="a-box">
        <router-link exact active-class="active" to="/">推荐</router-link>
        <router-link exact active-class="active" to="/list">排行</router-link>
        <router-link exact active-class="active" to="/classify">分类</router-link>
      </div>
      <div class="shujia" @click="show=false">
        <router-link to="/shujia">书架</router-link>
      </div>
    </nav>
    <div class="fnav"></div>
    <div class="find" v-if="arr.length!=0">
      <div v-for="p in arr" :key="p.id" @click="tonr(p.caricatureId)">
        {{p.name}}
      </div>
    </div>
    <footer v-if="is && show">
      <span class="close" @click="is=false"></span>
      <img src="./assets/public/logo.png" alt="">
      <div class="nr">
        <p>更多精彩内容</p>
        <p>尽在哔哩哔哩漫画</p>
      </div>
      <div class="app">
        <a href="../public/App.html">
          App 内打开
        </a>
      </div>
    </footer>
    <router-view :caricatureId="caricatureId" />
  </div>
</template>

<script>
const axios = require('axios');
const Qs = require('qs')
export default {
  data() {
    return {
      caricatureId: '',
      index: 1,
      is: true,
      show: true,
      isshoushuo: false,
      str: '',
      time: null,
      arr: []
    }
  },
  watch: {
    str(n, o) {
      if (this.time != null) {
        clearTimeout(this.time)
      }
      if (this.str == '') {
        this.arr = []
      } else {
        this.time = setTimeout(() => {
          let data = {
            find: "find",
            qc: this.str
          }
          axios({
            method: 'post',
            url: 'http://127.0.0.1/nr/allM',
            data: Qs.stringify(data)
          }).then((data) => {
            this.arr = data.data
            if (this.arr.status == 1) {
              this.arr = [{ name: '没有此漫画' }]
            }
            this.arr = this.arr.slice(0, 6)
          }).catch((err) => {
            console.log(err);
          })
        }, 1000);
      }
    }
  },
  methods: {
    foo(e) {
      let el = e.target.parentNode
      let caricatureId = el.getAttribute('data-caricatureId')
      if (caricatureId != undefined && el.localName == 'a') {
      }
    },
    shousuo() {
      this.isshoushuo = !this.isshoushuo
      this.str = ''
      this.$refs.ipt.focus()
    },
    tonr(caricatureId) {
      this.arr = []
      window.location.href = `/#/listNR?caricatureId=${caricatureId}`
    }
  }

}
</script>
<style lang="less">
* {
  caret-color: transparent;
}

html,
body,
#app {
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
<style lang="less" scoped>
.w() {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@color: #f77499;
@fColor: #f88ac3;
@unonColor: #919aa7;
@lColor: #dddddd;

html,
body,
#app {
  .w();
  width: 100%;
  height: 100%;

  a {
    text-decoration: none;
  }

  .fnav {
    height: 12.5333vw;
  }

  nav {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: .2667vw solid @lColor;
    height: 12.5333vw;
    align-items: center;
    background-color: white;
    z-index: 9999999;

    .shousuo {
      position: absolute;
      display: flex;
      align-items: center;
      height: 100%;
      background-color: white;
      z-index: 9999999;
      text-align: center;
      line-height: 12.8vw;
      color: #919aa7;
      transition: width .5s;
      margin-left: 3.9vw;

      i {
        cursor: pointer;
        font-size: 4.2667vw;
      }

      input {
        height: 5vw;
        outline: none;
        border: none;
        font-size: 3.2vw;
        background-color: rgba(110, 100, 100, 0.178);
        transition: all .5s;
        margin-left: 2.6667vw;
        border-radius: 5.3333vw;
      }
    }

    img {
      width: 6.9333vw;
      height: 6.9333vw;
      margin: 2.6667vw 4.8667vw 2.6667vw 5.3333vw;
    }

    .a-box {
      padding-left: 23.6667vw;

      a {
        text-decoration: none;
        color: @unonColor;
        font-size: 4.7vw;
        margin: 0 2.6667vw;
      }

      .active {
        color: @fColor;
      }
    }

    .shujia {
      background-color: @color;
      height: 5.3333vw;
      border-radius: 3.9333vw;
      line-height: 5.3333vw;
      text-align: center;
      padding: 1.3333vw 5.4667vw;
      margin-left: 6.2667vw;
      margin-right: 2.6667vw;

      a {
        color: white;
        font-size: 3.2vw;
      }
    }
  }

  .find {
    width: 80%;
    margin: 0 auto;

    div {
      padding-top: 2.6667vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 4.2667vw;
      line-height: 8vw;
      height: 8vw;
      border-bottom: .2667vw solid #919aa7;
      cursor: pointer;
    }

  }

  footer {
    display: flex;
    align-items: center;
    height: 12.8vw;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    bottom: 0vw;
    z-index: 999999;

    .close {
      width: 5.3333vw;
      height: 5.3333vw;
      line-height: 5.3333vw;
      text-align: center;
      margin: 0 1.3333vw 0 5.3333vw;
      border-radius: 50%;
      background: url(./assets/public/close.svg);
      background-size: 100% 100%;
    }

    img {
      width: 10.1333vw;
      height: 10.1333vw;
      margin-right: 2.6667vw;
    }

    .nr {
      p {
        color: white;
        font-size: 3.2vw;
        margin: 0 !important;
      }
    }

    .app {
      position: absolute;
      right: 5.3333vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: @color;
      color: white;
      padding: 1.3333vw 5.3333vw;
      height: 5.3333vw;
      border-radius: 5.3333vw;

      a {
        color: white;
        font-size: 3.2vw;
      }
    }
  }
}
</style>
